<template>
  <el-dialog
    title="设置有效期"
    :visible.sync="dialogVisible"
    size="tiny" @close="handleCancel()">
    <div class="set_class_time">
      <el-row>
        <el-col :span="6" class="set_l">
          姓名：
        </el-col>
        <el-col :span="18">
          {{studentInfo.name}}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="set_l">
          报名课程：
        </el-col>
        <el-col :span="18">
          {{classData.trainCourseName}}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="set_l">
          校区：
        </el-col>
        <el-col :span="18">
          {{studentInfo.schoolName}}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="set_l">
          班别：
        </el-col>
        <el-col :span="18">
          {{studentInfo.classesName}}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="set_l">
          次课类型：
        </el-col>
        <el-col :span="18">
          {{studentInfo.timesName}}
        </el-col>
      </el-row>
      <el-row style="margin-top:6px;">
        <el-col :span="6" class="set_l">
          有效期：
        </el-col>
        <el-col :span="18">
          <el-date-picker
            v-model="time"
            type="daterange"
            clearable
            style="width:85%"
            placeholder="请选择有效期">
          </el-date-picker>
        </el-col>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel()">取 消</el-button>
      <el-button type="primary" @click="handleSubmit()" :disabled="!(time && time.length > 0 && time[0] && time[1])">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import api from 'api/train'
export default {
  props: {
    isSetClassTime: {
      type: Boolean,
      default: false
    },
    studentInfo: {
      type: Object,
      default: {}
    },
    classData: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      dialogVisible: true,
      time: [this.studentInfo.expiresStartTime, this.studentInfo.expiresEndTime]
    }
  },
  methods: {
    handleCancel () {
      this.$emit('input', false)
    },
    handleSubmit () {
      api.updClassStudentValidity({
        classId: this.$route.query.id,
        courseId: this.$route.query.crruid,
        studentId: this.studentInfo.studentId,
        classStudentId: this.studentInfo.studentClassId,
        studentSignId: this.studentInfo.studentSignupId,
        expiresStartTime: this.time && this.time.length > 0 && this.time[0] ? (typeof(this.time[0].getTime) === 'function' ? this.time[0].getTime() : this.time[0]) : '',
        expiresEndTime: this.time && this.time.length > 0 && this.time[1] ? (typeof(this.time[1].getTime) === 'function' ? this.time[1].getTime() : this.time[1]) : ''
      }).then((res) => {
        this.$emit('upDate').$emit('input', false)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.set_class_time{
  padding:0 15px;
  .set_l{
    text-align: right;
  }
  .el-col{
    line-height:40px;
    margin:0;
  }
  .set_tips{
    font-size: 12px;
    color:#999;
    line-height: 30px;
    padding-left: 90px;
  }
}
</style>
